<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    头像: <input type="file" id="file" />
    <button id="btn">上传</button>

    <script>
      const btn = document.getElementById('btn')
      btn.onclick = function (e) {
        e.preventDefault()
        // 如果上传文件,没有form表单.则自己找到要上传的文件对象,然后将文件对象添加到formdata中
        // 获取上传文件表单元素的dom对象
        const file = document.getElementById('file')
        // 以对象的形式查看dom对象(标签)
        // console.dir(file.files[0]) //文件对象
        const fileObj = file.files[0]

        // 创建formdata实例
        const formdata = new FormData()
        formdata.append('avatar', fileObj)
        // //如何将formdata的数据通过ajax发送给服务器
        const xhr = new XMLHttpRequest()
        // // 注意: ajax配合formdata,只能用post请求
        xhr.open('post', 'http://localhost:5000/b')

        // 监听文件上传进度
        xhr.upload.onprogress = function (e) {
          // 上传文件的过程中会不断触发这个函数
          console.log('当前上传了多少', e.loaded, '字节')
          console.log('文件的总大小', e.total, '字节')
        }

        // // 注意: 如果是ajax配合formdata,则无需设置请求头.因为浏览器会自动帮我们设置 ==> content-type: multipart/form-data;
        xhr.send(formdata)
      }
    </script>
  </body>
</html>
